<template>
  <div class="starinfo">
    <!-- 物流单评价页 -->
    <!-- 书写标题头 -->
    <div class="order_title">
      <span class="one" @click="fanhui">&lt;</span>
      <span>快递单评价</span>
      <span @click="tijiao">提交</span>
    </div>
    <!-- 评价内容 -->
    <div class="pingjia">
      <!-- 总体评分 -->
      <div class="starAll">
        <p>总体评分</p>
        <h3>
          <span>{{ totavg }}</span
          >分
        </h3>
        <ul>
          <li v-for="(item, index) in 5" :key="index">
            <img :src="index < totavg ? imgTwo : imgOne" alt="" />
          </li>
        </ul>
      </div>
      <!-- 分开评分 -->
      <div class="pingfen">
        <h3>店铺评分</h3>
        <div class="Ping_list">
          <span>店铺评分</span>
          <ul>
            <li
              v-for="(item, index) in 5"
              :key="index"
              @click="change_col1(index)"
            >
              <img :src="index < shop ? srcImgTwo : srcImgOne" alt="" />
            </li>
          </ul>
        </div>
        <div class="Ping_list">
          <span>物流速度</span>
          <ul>
            <li
              v-for="(item, index) in 5"
              :key="index"
              @click="change_col2(index)"
            >
              <img :src="index < logistics ? srcImgThree : srcImgOne" alt="" />
            </li>
          </ul>
        </div>
        <div class="Ping_list">
          <span>快递评分</span>
          <ul>
            <li
              v-for="(item, index) in 5"
              :key="index"
              @click="change_col3(index)"
            >
              <img :src="index < express ? srcImgFour : srcImgOne" alt="" />
            </li>
          </ul>
        </div>
      </div>
    </div>
    <!-- 上传文件 -->
    <div class="updes">
      <textarea
        name=""
        id=""
        placeholder="输入想要描述的信息"
        v-model="desVal"
      ></textarea>
      <van-uploader v-model="fileList" multiple />
    </div>
  </div>
</template>

<script>
import { PutStarPingjia } from "@/request/api";
export default {
  data() {
    return {
      // 笑脸样式
      imgTwo: require("@/assets/xiaolian.png"),
      imgOne: require("@/assets/shangxin.png"),
      // 星星的样式
      srcImgOne: require("@/assets/pingfen-hui.png"),
      srcImgTwo: require("@/assets/pingfen-huang.png"),
      srcImgThree: require("@/assets/pingfen-cheng.png"),
      srcImgFour: require("@/assets/pingfen-hong.png"),
      //   文件上传
      fileList: [{ url: "https://img01.yzcdn.cn/vant/leaf.jpg" }],
      //  点击后的分数
      shop: 0,
      logistics: 0,
      express: 0,
      // 描述内容
      desVal: "",
      // 获取评价的总分数
      totalScore: 0,
    };
  },
  // created() {},
  methods: {
    fanhui() {
      this.$router.go(-1);
    },
    // 获取评分
    change_col1(val) {
      this.shop = val + 1;
    },
    change_col2(val) {
      this.logistics = val + 1;
    },
    change_col3(val) {
      this.express = val + 1;
    },
    // 提交请求
    tijiao() {
      console.log(this.$route.query.id);
      console.log(this.$route.query.orderCode);
      // 发送请求前将计算总分数获取到
      this.totalScore = Number(this.totavg);
      // console.log(this.totalScore);
      // console.log(this.shop);
      // console.log(this.logistics);
      // console.log(this.express);
      // console.log(this.desVal);
      PutStarPingjia({
        shop: this.shop,
        logistics: this.logistics,
        express: this.express,
        totalScore: this.totalScore,
        orderCode: this.$route.query.orderCode,
        id: this.$route.query.id,
        info: this.desVal,
      }).then((res) => {
        console.log(res.data);
      });
      // PutStarPingjia({
      //   shop: 0,
      //   logistics: 0,
      //   express: 0,
      //   totalScore: 0,
      //   orderCode: "1356515197083541511",
      //   id: "1356515197096124417",
      //   info: "这个是一个订单",
      // }).then((res) => {
      //   console.log(res.data);
      // });
    },
  },
  //   计算总体平均分
  computed: {
    totavg() {
      return Number((this.shop + this.logistics + this.express) / 3).toFixed(2);
    },
  },
};
</script>
 
<style lang = "less" scoped>
.starinfo {
  min-height: 100%;
  width: 100%;
  background-color: #efefef;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 5;
  /* 头部样式 */
  .order_title {
    width: 100%;
    height: 0.5rem;
    background-color: #003399;
    color: white;
    padding: 0.2rem 0.2rem 0.1rem;
    box-sizing: border-box;
    font-size: 0.18rem;
    display: flex;
    justify-content: space-between;
  }
  /* 评价样式 */
  .pingjia {
    width: 100%;
    background-color: white;
    /* 总体评分样式 */
    .starAll {
      width: 100%;
      padding: 0 0.2rem 0.2rem 0.2rem;
      box-sizing: border-box;
      text-align: center;
      p {
        line-height: 0.4rem;
        color: #aaa;
      }
      h3 {
        color: #ffd147;
        span {
          font-size: 0.4rem;
        }
        padding-bottom: 0.1rem;
      }
      ul {
        display: flex;
        justify-content: space-around;
        border-bottom: 0.02rem solid #eee;
        padding-bottom: 0.15rem;
        li {
          height: 0.35rem;
          width: 0.35rem;
          img {
            width: 100%;
          }
        }
      }
    }
    /* 分类评分样式 */
    .pingfen {
      width: 100%;
      padding: 0 0.2rem;
      box-sizing: border-box;
      h3 {
        line-height: 0.3rem;
      }
      .Ping_list {
        display: flex;
        line-height: 0.2rem;
        line-height: 50px;
        /* justify-content: space-between; */
        padding: 0 0.2rem;
        ul {
          margin-left: 0.2rem;
          li {
            float: left;
            margin-right: 0.1rem;
            height: 0.5rem;
            vertical-align: center;
            img {
              height: 0.3rem;
              margin-top: 10px;
            }
          }
        }
      }
    }
  }
  .updes {
    margin-top: 0.1rem;
    background-color: white;
    width: 100%;
    padding: 0.1rem 0.2rem;
    box-sizing: border-box;
    textarea {
      width: 100%;
      height: 1.5rem;
      border: 0;
    }
  }
}
</style>